<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<script src="./jquery.min.js"></script>
<script src="./clipboard.min.js"></script>
<style type="text/css">
	<!--
	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size:12px;
		color:#666666;
		background:#fff;
		text-align:left;
	}
	a {
		color:#1E7ACE;
		text-decoration:none; 
	}
	a:hover {
		color:#000;
		text-decoration:underline;
	}
	h3 {
		font-size:14px;
		font-weight:bold;
	}
	
	pre,p {
		color:#1E7ACE;
		margin:4px;
	}
	input, select,textarea {
		padding:1px;
		margin:2px;
		font-size:11px;
	}
	
	fieldset {
		padding:10px;
		margin-top:10px;
		border:1px solid #A4CDF2;
		background:#fff;
	}
	
	fieldset legend {
		color:#1E7ACE;
		font-weight:bold;
		padding:3px 20px 3px 20px;
		border:1px solid #A4CDF2; 
		background:#fff;
	}
	
	input {
		border:1px solid #A4CDF2;
	}
	
	button {
		border:1px solid #A4CDF2;
		background-color : #FFFFFF;
		height:25px;
		margin-top:10px;
		font-weight:bold;
		color:#1E7ACE;
	}
	-->
</style>
	
<script>
    var describe;
    $.getScript('./describe.js?rd=' + Math.random()).then(function() {
		describe = new Describe();
		describe.load();
    }).catch( function() {
		alert('get describe error.'); 
    });
	
	$(document).ready(function(){
        var clipboard = new Clipboard("#btn_copy");
		$('#butSearch').click(function() {
		var  strKey = $('#inpSearch').val();
		  if(strKey == ""){
		  window.location.reload();
		  }else{
		   describe.search(strKey);
		  }
		})
		$('#inpSearch').bind('keyup', function(event) {
　　     if (event.keyCode == "13") {
　　　　     $('#butSearch').click();
　　       }
       });
	});	
</script>
</head>

<body style="font-size: 12px; font-family: Microsoft Yahei; margin: 0px;border-image: linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 100%, #ffffff);box-shadow: inset 15px 0 5px -16px #e7e7e7;background-image: -webkit-radial-gradient(right, #f2f2f2, #ffffff 100%);">
	<table style="width: 1800px; margin: 0 auto">
		<tr>
			<td style="width: 350px;" valign="top">
				<fieldset>
					<legend>search</legend>
					<div><input id="inpSearch" style="width:70%;height: 23px; overflow: auto;"/>&nbsp; <button id="butSearch">search</button></div>
				</fieldset>
				<fieldset>
					<legend>API Menu</legend>
					<div id="menu" style="height: 850px; overflow: auto;">&nbsp;</div>
				</fieldset>
			</td>
			<td valign="top">			
				<!--<fieldset>
					<legend>Content</legend>
					<div id="content"
						style="white-space: pre; font-size: 12px; word-break: break-all; word-wrap: break-word">&nbsp;</div>
				</fieldset> -->
				
				<div id="content"
						style="white-space: pre; font-size: 12px; word-break: break-all; word-wrap: break-word;border-image: linear-gradient(#ffffff, #e7e7e7 15%, #e7e7e7 100%, #ffffff);box-shadow: inset 15px 0 5px -16px #e7e7e7;background-image: -webkit-radial-gradient(right, #f2f2f2, #ffffff 100%);">&nbsp;</div>
				<fieldset>
					<legend>
						Result&nbsp;<a id="btn_copy" href="javascript:" data-clipboard-target="#result">copy</a>&nbsp;
					</legend>
					<div id="result"
						style="white-space: pre; font-size: 12px; word-break: break-all; word-wrap: break-word; width: 1400px">&nbsp;</div>
				</fieldset>
				
			    <fieldset>
					<legend>
						Sample&nbsp;<a  id="btn_copy"  href="javascript:" data-clipboard-target="#Sample">copy</a>&nbsp;
					</legend><div style="padding-left:12px">
					<div id="Sample"
						style="white-space: pre; font-size: 12px; word-break: break-all; word-wrap: break-word; width: 1400px;">&nbsp;</div>
						</div>
				</fieldset>		
						

			</td>
		</tr>
	</table>
</body>
</html>